<template>
  <el-dialog v-model="visible" width="960">
    <template #header>
      <div style="width: 100%; height: 100%; text-align: center">导入API接口</div>
    </template>
    <div style="width: 100%">
      <el-steps :active="0" align-center>
        <el-step title="上传文件" />
        <el-step title="数据分析" />
        <el-step title="导入结果" />
      </el-steps>
      <div style="border: 1px solid #d2d2d2; border-radius: 5px; margin-top: 15px; display: flex; align-items: center; padding: 0 20px; height: 50px">
        <label>导入格式：</label>
        <el-radio-group v-model="importFormat">
          <el-radio v-for="item in importFormatList" :value="item.value" size="large">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>

      <div v-if="importFormat === 'DEER_WHALE_API_DOCUMENT'" style="width: 100%">
        <div style="border: 1px solid #d2d2d2; border-radius: 5px; margin-top: 15px; display: flex; padding: 15px">
          <div style="height: 100%; width: 50%; padding: 15px">
            <el-form>
              <el-form-item label="接口分类">
                <el-input placeholder="Approved by" clearable />
              </el-form-item>
              <el-form-item label="接口版本">
                <el-input placeholder="Approved by" clearable />
              </el-form-item>
              <el-form-item label="导入模式">
                <el-input placeholder="Approved by" clearable />
              </el-form-item>
            </el-form>
          </div>
          <div style="height: 100%; width: 50%; display: flex; justify-content: center; border-left: 1px solid #d2d2d2; align-items: center; padding: 15px">
            <el-upload style="width: 100%" :show-file-list="false" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">拖动文件到这里 or <em>点击上传文件</em></div>
            </el-upload>
          </div>
        </div>
        <div style="border: 1px solid #d2d2d2; border-radius: 5px; margin-top: 15px; color: #000; padding: 15px; background-color: #d2d2d2">
          <div>说明：支持按本系统要求文件格式的Word文档导入</div>
          <div>导入模式：覆盖模式说明</div>
          <div>1.同一分类下，接口名称不存在则新增</div>
          <div>2.同一分类下，接口名称存在,则覆盖原接口</div>
        </div>
      </div>

      <div v-if="importFormat === 'SWAGGER_API_DOCUMENT'" style="width: 100%">
        <div style="border: 1px solid #d2d2d2; border-radius: 5px; margin-top: 15px; display: flex; align-items: center; padding: 0 20px; height: 50px">
          <label>Swagger API 模式：</label>
          <el-radio-group v-model="importSwaggerModel">
            <el-radio v-for="item in importSwaggerApiModelList" :value="item.value" size="large">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { UploadFilled } from '@element-plus/icons-vue';

defineOptions({
  name: 'ApiImportDialog',
});
const visible = ref<boolean>(false);

const showDialog = () => {
  visible.value = true;
};
const importFormat = ref<string>('DEER_WHALE_API_DOCUMENT');
const importFormatList = [
  {
    label: '鹿鲸接口文档',
    value: 'DEER_WHALE_API_DOCUMENT',
  },
  {
    label: 'Swagger API',
    value: 'SWAGGER_API_DOCUMENT',
  },
];
const importSwaggerModel = ref<string>('SWAGGER_API_URL');
const importSwaggerApiModelList = [
  {
    label: '在线URL解析',
    value: 'SWAGGER_API_URL',
  },
  {
    label: 'JSON文档导入',
    var: 'SWAGGER_JSON_DOCUMENT',
  },
];
defineExpose({ showDialog });
</script>
